import React, { Component, Suspense } from 'react'
import "./Index.less"
import { Switch, Route, Redirect, NavLink } from "react-router-dom"
import { Result, Icon } from 'antd-mobile';

let Home = React.lazy(() => import("../Home/Home"))
let Cate = React.lazy(() => import("../Cate/Cate"))
let Shop = React.lazy(() => import("../Shop/Shop"))
let Mine = React.lazy(() => import("../Mine/Mine"))

export default class Index extends Component {
    render() {
        return (
            <div className="index">
                {/* 二级路由出口 */}
                <Suspense fallback={<Result
                    img={<Icon type="loading" size={"lg"} style={{ fill: '#ccc' }} />}
                    title="正在玩命加载......"
                />}>
                    <Switch>
                        <Route path="/index/home" component={Home}></Route>
                        <Route path="/index/cate" component={Cate}></Route>
                        <Route path="/index/shop" component={Shop}></Route>
                        <Route path="/index/mine" component={Mine}></Route>
                        <Redirect to="/index/home"></Redirect>
                    </Switch>
                </Suspense>

                {/* 底部导航 */}
                <footer>
                    <NavLink activeClassName="select" to="/index/home">商城</NavLink>
                    <NavLink activeClassName="select" to="/index/cate">分类</NavLink>
                    <NavLink activeClassName="select" to="/index/shop">购物车</NavLink>
                    <NavLink activeClassName="select" to="/index/mine">我</NavLink>
                </footer>
            </div>
        )
    }
}
